<template>
	<view id="notice-detail">
		<view v-if="typeof(detailData.content)=='string'">
			<view class="titie">
				{{detailData.title}}
			</view>
			<view class="time">
				{{detailData.create_time}}
			</view>
			<view class="content">
        <text class="html-text-box" v-html="detailData.content" />
				<!--{{detailData.content}}-->
			</view>
		</view>
		<view v-else>
			<view class="titie">
				{{detailData.title}}
			</view>
			<view class="time">
				{{detailData.create_time}}
			</view>
			<view class="content" v-cloak>
				<view class="red" @click="copyValue(detailData.content.merchant_name)">
					<text>店铺名称：{{detailData.content.merchant_name}}</text>
					<view><button type="warn" size="mini">复制</button></view>
				</view>
				<view class="red" @click="copyValue(detailData.content.order_num)">
					<text>订单号：{{detailData.content.order_num}}</text>
					<view><button type="warn" size="mini">复制</button></view>
				</view>
				<view>旺旺号：{{detailData.content.tb_name}}</view>
				<view>任务时间：{{detailData.create_time}}</view>
			</view>
			<view class="footer" v-if="second">
				<button type="warn" :disabled="second != 0"><text>{{' ' + second + ' '}}秒</text></button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		apiNoticeDetail,
		apiPushMessageDetail,
		apiClearUrgeReceipt
	} from '../../../http/apis.js'

	import {
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState(['token'])
		},
		data() {
			return {
				second: 10,
				detailData: {
					content: ""
				},
				detailId: '',
				detailType: 0,
        timer: ""
			};
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			this.detailType = option.type
			this.detailId  = option.id
			if(this.detailType == 0){
				this.getNoticeDetail()
			} else {
				this.getNewsDetail()
			}
		},
		methods: {
			// 消息id
			read(id) {
				apiClearUrgeReceipt({
					token: this.token,
					msg_id: id
				}).then(res => {
					if (res.data.code == 1) {
						this.$msg.showToast(res.data.msg)
						uni.switchTab({
							url: '../home/home',
							success() {
								uni.$emit("reload")
							}
						})
					} else {
						this.$msg.showToast(res.data.msg)
					}
				}).catch(res => {
					console.log(res)
					this.$msg.showToast(res.data.msg)
				})
			},
			// 是否开启阅读定时
			timerInterval() {
				if (this.detailData.status == 1) {
					this.timer = setInterval(() => {
						this.second -= 1
						if (!this.second) {
							this.read(this.detailData.id)
							clearInterval(this.timer)
						}
					}, 1000)
				} else {
					this.second = 0
				}
			},
			// 复制
			copyValue(value) {
				uni.setClipboardData({
					data: value,
					success: () => {
						this.$msg.showToast("复制成功")
					}
				});
			},
			getNoticeDetail(){
				apiNoticeDetail({
					token: this.token,
					noticeId: this.detailId
				}).then(res =>{
				    if(res.data.code == 1)  {
						this.detailData = res.data.msg
					}
				}).catch(res => {
					this.$msg.showToast(res.data.msg)
				})
			},
			getNewsDetail(){
				apiPushMessageDetail({
					token: this.token,
					messageId: this.detailId
				}).then(res =>{
				    if(res.data.code == 1)  {
						this.detailData = res.data.msg
						this.timerInterval()
					}
				}).catch(res => {
					this.$msg.showToast(res.data.msg)
				})
			},
			ym(time) {
				var date = new Date(time);
				var y = date.getFullYear();
				var m = date.getMonth() + 1;
				m = m < 10 ? ('0' + m) : m;
				var d = date.getDate();
				d = d < 10 ? ('0' + d) : d;
				var h = date.getHours();
				h = h < 10 ? ('0' + h) : h;
				var minute = date.getMinutes();
				var second = date.getSeconds();
				minute = minute < 10 ? ('0' + minute) : minute;
				second = second < 10 ? ('0' + second) : second;
				return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
			}
		},
		destroyed() {
			clearInterval(this.timer)
		},
	}
</script>

<style lang="less" scoped>
	page {
		background: #FFFFFF;
	}
	#notice-detail {
		background: white;
		overflow: hidden;

		.titie {
			font-weight: 600;
			padding: 40upx 32upx;
			font-size: 36upx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 30px;
			color: #333;
			opacity: 1;
		}

		.time {
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 32upx;
			color: #999;
			opacity: 1;
			padding: 0upx 32upx 30upx 32upx;

		}

		.content {
			padding: 0px 32upx;
			.red {
				width: 100%;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				color: red;
			}
		}
		.footer {
			position: absolute;
			left: 0;
			bottom: 0;

			width: 100%;
		}
	}
</style>

